import React from 'react'
import classnames from 'classnames'
const ReplayItem = props => {
  const {gameNo, createTime, roundSettleVo, video} = props.data
  const showDetail = props.showDetail;
  const gameName = props.gameName
  // console.error('props.data', props);
  let battleBottom = null;
  if(video) {
    battleBottom = <img onClick={props.replay} className="replay" src="img/battle/replay-btn.png" alt="回放" />
  }
   if(showDetail){
    battleBottom = <img onClick={props.detail} className="replay" src="img/battle/detail-btn.png" alt="详情" />
  }
   let is4 = (gameName === 'CSMAHJONG' || gameName === 'PJMAHJONG' || gameName === 'HONGZHONG')
  return <div className="battle-item">
    <div className="replay-content-top pure-g">
      <div className="pure-u-1-2 middle-img roomNo-text">
        回合统计: 第 {props.index} 回合
      </div>
      <div className="pure-u-1-2 text-right battle-time">
        {createTime}
      </div>
    </div>
    <div className="battle-content-middle pure-g">
      {
        roundSettleVo.map((settle, index) => {
          const pointCn = classnames({'record-fail': settle.point >= 0, 'record-win': settle.point < 0, 'mrr-1': true})
          const nickNameLength = settle.banker ? 3 : 5

          const boxclass = classnames({'pure-u-1-3': !is4, 'pure-u-1-2': is4, 'box': true})
          return <div className={boxclass} key={index}>
            <div className="point-show text-ellipsis">
              <span className="mlr-1 zhuang-username">{util.maxLength(settle.nickName, nickNameLength)}</span>
              <span className="zhuang-icon">{ settle.banker ? <img  src="img/battle/zhuang.png" alt=""></img> : null }</span>
              <span className={pointCn}>{settle.point > 0 ? '+' + settle.point: settle.point}</span>
            </div>
          </div>
        })
      }
    </div>
    <div className="battle-content-bottom">
        { battleBottom }
    </div>
  </div>
}
export default ReplayItem